<template>
  <div class="box">
    <h4>
      <a></a>
      <span>社区</span>
      <a class="el-icon-plus" @click="publisharticle"></a>
    </h4>
    <!-- 文章详情内容 -->
    <div class="artpag">
      <div v-for="(item, index) in data" :key="index" :data-key="item.tid">
        <div class="artpag_list">
          <div class="head">
            <p><img :src="url + item.u_headers" /></p>
          </div>
          <div class="comment">
            <p class="nick">{{ item.u_nick }}</p>
            <p class="text">{{ item.content_text }}</p>
            <p class="url" v-if="item.puc_url">
              <img :src="url + item.puc_url" alt="" />
            </p>
            <p class="time">
              <a class="a1">{{ item.release_time }}</a>
              <a></a>
            </p>
          </div>
        </div>
        <!-- 点赞及详细评论 -->
        <div class="discuss">
          <a class="el-icon-chat-square" @click="lookdiscuss($event)"></a>
          <!-- <a class="el-icon-more" @click="lookdiscuss($event)"></a> -->
          <a class="el-icon-star-off a2" @click="artpag($event)">
            {{ item.uidNum }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      data: [], //文章详情渲染
      url: "http://test.com:3000/image/",
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    // 渲染评论
    lookdiscuss(e) {
      this.$router.push({
        path: "/community/show",
        query: {
          tid: e.target.parentNode.parentNode.getAttribute("data-key"),
        },
      });
    },
    
    // 渲染文章详情
   
    // 发布文章页面
    publisharticle() {
      this.$router.push({
        path: "/publisharticle",
      });
    },

    // 点赞
    artpag(e) {
      this.$http
        .post("/api/community/agree", {
          tid: e.target.parentNode.parentNode.getAttribute("data-key"),
          uid: this.uid,
        })
        .then((res) => {
          if (res.code == 200) {
            this.reload();
          } else if (res.code == 201) {
            this.reload();
          }
        });
    },
  },
  mounted() {
    // 渲染社区文章详情
    this.$http.get("/api/community/index").then((res) => {
        // console.log(res.articlelistData);
        res.articlelistData.forEach((once) => {
          this.data.push(once);
        });
      });
  },
};
</script>


<style lang="less" scoped>
.box {
  height: auto;
  h4 {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    height: 2.5rem;
    color: #fff;
    margin: 0;
    background-color: #000;
    a {
      flex: 1;
      line-height: 2.5rem;
    }
    span {
      flex: 8;
      text-align: center;
      line-height: 2.5rem;
    }
  }
  .artpag {
    position: absolute;
    width: 100%;
    top: 2.5rem;
    height: calc(100vh - 4.8rem);
    color: rgb(189, 187, 187);
    font-size: 0.8rem;
    overflow: hidden;
    overflow-y: scroll;
    background-color: rgb(32, 31, 31);
    p {
      margin: 0.5rem;
    }
    .artpag_list {
      display: flex;
      height: auto;
      .head {
        flex: 2;
        p {
          height: 4rem;
          img {
            width: 3rem;
            height: 3rem;
          }
        }
      }
      .comment {
        flex: 8;
        height: 100%;
        .nick {
          font-size: 1rem;
          color: #5fa3d1;
        }
        .url {
          img {
            width: 80%;
            // height: 12rem;
          }
        }
        .text {
           white-space:normal;
        }
        .time {
          color: rgb(121, 120, 119);
          .a1 {
            float: left;
          }
          .a2 {
            float: right;
            padding: 0 1rem 0 0;
          }
        }
      }
    }
    .discuss {
      display: flex;
      margin: 1rem auto;
      width: 90%;
      height: 1.5rem;
      overflow: hidden;
      background-color: rgb(36, 35, 35);
      a {
        flex: 1;
        line-height: 1.5rem;
        text-align: center;
      }
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>